<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
	<title>scrollpicker</title>
	<link rel="stylesheet" href="../../dist/seedsui.min.css">
</head>

<body ontouchstart="">
	<header>
		<div class="titlebar">
	        <a class="titlebar-button" href="javascript:back()">
	            <i class="icon icon-arrowleft"></i>
	        </a>
	        <h1 class="titlebar-title">滚动选择器</h1>
	    </div>
	</header>
	<article>
		<div class="inputbox bordered" style="margin:8px;background-color: white;">
            <input type="text" class="input-text text-center" placeholder="滚动选择器" readonly="readonly" id="ID-Sp"/>
        </div>
	</article>
	<!--SeedsUI-->
    <script src="../../dist/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <!--<script src="../scripts/lib/exmobi/exmobi.js"></script>-->
    <script type="text/javascript">
    var view={
        /*=========================
          Model
          ===========================*/
        initialize:function(){
            /*DOM*/
            this.textSp=document.getElementById("ID-Sp");

            /*Plugin*/
            this.scrollpicker={};
            this.scrollpicker.hasEvent=false;
            this.spdata1=[
                {'key':'a','value':'1'},
                {'key':'b','value':'2'},
                {'key':'c','value':'3'},
                {'key':'d','value':'4'},
                {'key':'e','value':'5'},
                {'key':'f','value':'6'},
                {'key':'g','value':'7'},
                {'key':'h','value':'8'},
                {'key':'i','value':'9'},
                {'key':'j','value':'10'},
                {'key':'k','value':'11'},
                {'key':'l','value':'12'},
                {'key':'m','value':'13'},
                {'key':'n','value':'14'},
                {'key':'o','value':'15'},
                {'key':'p','value':'16'},
                {'key':'q','value':'17'},
                {'key':'r','value':'18'},
                {'key':'s','value':'19'},
                {'key':'t','value':'20'},
                {'key':'u','value':'21'},
                {'key':'v','value':'22'},
                {'key':'w','value':'23'},
                {'key':'x','value':'24'},
                {'key':'y','value':'25'},
                {'key':'z','value':'26'},
            ];
            this.spdata2=[
                {'key':'I','value':'1'},
                {'key':'II','value':'2'},
                {'key':'III','value':'3'},
                {'key':'IV','value':'4'},
                {'key':'V','value':'5'},
                {'key':'VI','value':'6'},
                {'key':'VII','value':'7'},
                {'key':'VIII','value':'8'},
                {'key':'IX','value':'9'},
                {'key':'X','value':'10'},
            ];

            /*Data*/

            /*Render*/
            this.render();
            
            /*Events*/
            this._attach();
        },
        render:function(){
            this._initPlugin();
        },
        /*=========================
          Plugin
          ===========================*/
        _initScrollPicker:function(){
            var self=this;
            this.scrollpicker=new Scrollpicker({
                parent:"article",
                onInit:function(e){
                    console.log("初始化");
                },
                onClickDone:function(e){
                    //获得全部选中项
                    var activeText="";
                    e.activeOptions.forEach(function(n,i,a){
                        if(i==e.activeOptions.length-1){
                            activeText+=n["value"];
                        }else{
                            activeText+=n["value"]+"-";
                        }
                    });
                    self.textSp.value=activeText;
                    e.hide();
                },
                onClickCancel:function(e){
                    //e.updateSlots();
                    e.hide();
                },
                onScrollEnd:function(e){
                    //获得当前选中项
                    console.log("滚动槽："+e.activeSlot.index);
                    console.log("滚动槽值："+e.activeSlot.values);
                    console.log("选中项数："+e.activeSlot.activeIndex);
                    console.log("全部选中项："+e.activeOptions);
                },
                onShowed:function(e){
                    //console.log("已显示");
                },
                onHid:function(e){
                    //console.log("已隐藏");
                }
            });
        },
        _addScrollpickerData:function(){
            this.scrollpicker.addSlot(this.spdata1,'d');//数据,默认key,样式
            this.scrollpicker.addSlot(this.spdata2);
        },
        _initPlugin:function(){
            this._initScrollPicker();
            this._addScrollpickerData();
        },
        /*=========================
          Events
          ===========================*/
        _attach:function(e){
            var self=this;
            if(!self.textSp.hasEvent){
                this.textSp.addEventListener("click",function(e){
                    self._onClickTextSp(e);
                },false);
                self.textSp.hasEvent=true;
            }
        },
        /*=========================
          Event Handler
          ===========================*/
        _onClickTextSp:function(e){
            this.scrollpicker.show();
        }
    }

    window.addEventListener("load",function(){
        view.initialize();
    }, false);

	//定义exmobi返回
	function back(){history.go(-1);}
	</script>
</body>
</html>
